<template>
	<view class="mph100 bf ">
		<view class="table_h fixed_top plr30 ft26 tac">
			<view class="table_th bd">
				<view class="table_td  bdr">逾期费用</view>
				<view class="table_td  bdr">逾期价</view>
				<view class="table_td  bdr">逾期时长</view>
				<view class="table_td  bdr">逾期开始时间</view>
				<view class="table_td  bdr">套餐抵扣天数</view>
				<view class="table_td ">操作</view>
			</view>
		</view>
		<view class="table_w plr30  pb140 tac " style="padding-top: 105rpx;">
			<view class="table_b bd">
				<block v-for="item in loadList" :key="item.id">
					<view class="table_tr">
						<view class="table_td ptb20 bdr line100">{{item.overduePay?item.overduePay+'元': '--'}}</view>
						<view class="table_td ptb20 bdr line100">{{item.overduePrice?item.overduePrice+'元/天': '--'}}
						</view>
						<view class="table_td ptb20 bdr line100">{{item.overdueTime?item.overdueTime+'天': '--'}}</view>
						<view class="table_td ptb20 bdr">{{ item.ctime  | formatTime }}</view>
						<view class="table_td ptb20 bdr line100">{{ item.mealDay?item.mealDay+'天': '--' }}</view>
						<view class="table_td ptb20">
							<text class="ft22 primary" v-if="item.status == 0" @click="goOrderList(item.id)"
								style="font-size: 36upx;font-weight: 700;padding-left: 20upx;">支付</text>
						</view>
					</view>
				</block>
				<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">
					<view class="c9 pt20">您还没有逾期记录~</view>
				</view>
			</view>
			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import loadMore from '@/mixins/loadMore'
	import {
		userOverdueList,
		payOverdueOrder
	} from '@/api/user.js'
	export default {
		name: 'depositDetail',
		// mixins: [loadMore],
		data() {
			return {
				showTime: false,
				isTapScan: false,
				page: 1,
				pageLength: 0,
				limit: 20,
				loadMoreText: '',
				totalPage: '',
				loadList: [],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				loadStatus: 'loadmore'
			}
		},
		onLoad() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.loadData();
		},
		onReachBottom() {
			if (this.pageLength == this.limit) {
				this.page++;
				this.loadMoreText = 'loading';
				this.loadData();
			} else {
				this.loadMoreText = 'noMore';
			}
		},
		methods: {
			async loadData() {
				const res = await userOverdueList({
					pageNum: this.page,
					pageSize: this.limit
				})
				this.showTime = true
				this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]
				console.log(this.loadList, 'loadListloadListloadList')
				this.pageLength = res.rows.length
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'
			},
			goOrderList(id) {
				uni.showModal({
					title: '提示',
					content: '你确认支付逾期金额？',
					success: async (res) => {
						if (res.confirm) {
							let res = await payOverdueOrder({
								overdueOrderId: id
							})
							if (res.code !== 200) return
							if (res.data.payTag) {
								this.wx_payment(res.data.orderNo, result => {
									if (result == 1) {
										this.loadData();
									} else if (result == 2) {
										this.toast('取消支付')
									}
								})
							} else {
								this.confirm({
									content: '支付成功',
									showCancel: false
								}).then(res => {
									this.loadData();
								})
							}
						}
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.table_th {
		display: flex;
		word-wrap: break-word;
		background-color: #F4F4F5;

		.table_td {
			display: inline-block;
			width: 130upx;
			padding: 20upx 10upx;
		}
	}

	.table_w {
		.table_tr {
			display: flex;
			word-wrap: break-word;
			justify-content: flex-start;
			align-items: center;

			.table_td {
				display: inline-block;
				width: 130upx;
				padding: 20upx 10upx;
			}
		}

		.table_b {
			border-top: none;
		}

		.table_tr {
			border-bottom: 1px solid #e4e7ed;
			font-size: 24upx;
		}

		.table_tr:last-child {
			border: none;
		}
	}

	.btn-box {
		color: #fff;
		background-color: #3282FF;
		border-radius: 50rpx;
		position: relative;
		bottom: -100rpx;
	}

	.line100 {
		line-height: 104upx;
	}
</style>